import React, { Component, Fragment } from 'react';
import { observer, inject } from 'mobx-react';
import { WeaDialog, WeaLocaleProvider, WeaTop, WeaTab, WeaRightMenu } from 'ecCom';
import { WeaTableNew, WeaLogView } from 'comsMobx';
import { Button } from 'antd';
import { toJS } from 'mobx';

const { getLabel } = WeaLocaleProvider;
const { WeaTable } = WeaTableNew;
const WeaLogViewComp = WeaLogView.Component;

@inject('privateGroupSetingStore')
@observer
class PrivateGroupSetingComponent extends Component {
  constructor(props) {
    super(props);
    this.getDropMenuDatas = this.getDropMenuDatas.bind(this);
    this.getTopBtn = this.getTopBtn.bind(this);
  }

  componentDidMount() {
    const { privateGroupSetingStore } = this.props;
    privateGroupSetingStore.getTableData();
    privateGroupSetingStore.getCommReceiveItems();
    privateGroupSetingStore.getPrivateReceiveLogType();
  }

  render() {
    const { privateGroupSetingStore } = this.props;
    const { tableStore, selectedRowKeys, logVisible, logStore, logType, logSmallType, creatDialogVisible, form,
      loading, isCreat, onOperatesClick, creatDialogHide, onCheck, getTableData, rowSelection,
      logHide } = privateGroupSetingStore;
    const dialogTitle = isCreat ? getLabel(390079, '新建私人组') : getLabel(390315, '编辑私人组');
    return (
      <Fragment ecId={`${this && this.props && this.props.ecId || ''}_Fragment@2cfvzi`}>
        <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@1qt5a0`} datas={this.getDropMenuDatas()} >
          <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@5i14hx`}
            title={getLabel(390005, '收（发）文单位私人组')}
            icon={<i className={'icon-coms-official'} />}
            iconBgcolor="#f14a2d"
            loading={loading}
            showDropIcon={true}
            dropMenuDatas={this.getDropMenuDatas()}
            buttons={this.getTopBtn()}
          />
          <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@zjbedx`}
            searchType={['base']}
            onSearch={getTableData}
          />

          <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@5tosrs`}
            hasOrder={true}
            needScroll={true}
            comsWeaTableStore={tableStore}
            getColumns={this.getColumns}
            rowSelection={{
              selectedRowKeys,
              onChange: rowSelection,
            }}
            onOperatesClick={onOperatesClick}
          />

          <WeaLogViewComp ecId={`${this && this.props && this.props.ecId || ''}_WeaLogViewComp@vhty2e`}
            visible={logVisible}
            onCancel={logHide}
            logStore={logStore}
            logType={logType}
            logSmallType={logSmallType}
            targetId={toJS(selectedRowKeys)[0]}
          />
        </WeaRightMenu>

        <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@xico2e`}
          title={dialogTitle}
          icon="icon-coms-official"
          visible={creatDialogVisible}
          onCancel={creatDialogHide}
          draggable={true}
          maskClosable={true}
          style={{ width: 500 }}
          className="publicGroupDialogForm"
          buttons={[<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@dmsy38@save`} type="primary" disabled={loading} onClick={onCheck}>{getLabel(30986, '保存')}</Button>]}
        >
          {form.render()}
        </WeaDialog>


      </Fragment>
    );
  }

  getTopBtn() {
    const { creatDialogShow, selectedRowKeys, loading, showConfirm } = this.props.privateGroupSetingStore;
    const disabled = !(toJS(selectedRowKeys).length > 0);
    const btns = [
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@h3y95a@create`} type="primary" onClick={creatDialogShow} >{getLabel(365, '新建')}</Button>,
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@30q2bh@delete`} type="primary" disabled={!loading && disabled} onClick={showConfirm} >{getLabel(32136, '批量删除')}</Button>,
    ];
    return btns;
  }

  getDropMenuDatas() {
    const { creatDialogShow, selectedRowKeys, logShow, showConfirm } = this.props.privateGroupSetingStore;
    const disabled = !(selectedRowKeys.length > 0);
    const dropMenuDatas = [
      {
        key: '1',
        disabled: false,
        icon: <i className="icon-coms-Add-to" />,
        content: getLabel('365', '新建'),
        onClick: creatDialogShow,
      },
      {
        key: '2',
        disabled,
        icon: <i className="icon-coms-form-delete" />,
        content: '批量删除',
        onClick: showConfirm,
      },
      {
        key: '3',
        disabled: false,
        icon: <i className="icon-coms-Print-log" />,
        content: '日志',
        onClick: logShow,
      },
    ];
    return dropMenuDatas;
  }

  // 自定义列
  getColumns = (columns) => {
    const { onOperatesClick } = this.props.privateGroupSetingStore;
    return columns.map((col) => {
      if (col.dataIndex == 'receiveunitname') {
        return {
          ...col,
          title: col.title,
          render(text, record) {
            return (
              <a style={{ color: '#00a9ff' }} onClick={() => onOperatesClick(record, '', '', '0')}>{text}</a>
            );
          },
        };
      }
      return col;
    });
  }
}

export default PrivateGroupSetingComponent;
